<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="javaScript/biaodan.js"></script>
		<style type="text/css">
			#d1{
				margin: 0px auto;
				width: 800px;
				height: 500px;
			}
			#d2{
				font-size: 13px;
				float: left;
				padding: 0px 3px;
				line-height: 20px;
				display: flex;
				align-items: center;
				background-color: mistyrose;
				border: solid 1px red;
				
				display: none;
			}
			#d3{
				font-size: 13px;
				float: left;
				padding: 0px 3px;
				line-height: 20px;
				display: flex;
				align-items: center;
				background-color: palegreen;
				border: solid 1px green;
				
				display: none;
			}
			#d4{
				font-size: 13px;
				float: left;
				padding: 0px 3px;
				line-height: 20px;
				display: flex;
				align-items: center;
				background-color: lightyellow;
				border: solid 1px yellow;
				
				display: none;
			}
			#d5{
				font-size: 13px;
				float: left;
				padding: 0px 3px;
				line-height: 20px;
				display: flex;
				align-items: center;
				background-color: mistyrose;
				border: solid 1px red;
				
				display: none;
			}
			
			#s1{
				font-size: 13px;
				color: darkgrey;
			}
			#s2{
				margin-left: 3px;
			}
			
			
			table td{
				
				border: none;
			}
			table td:first-of-type{
				width: 120px;
				text-align: right;
			}
			table tr:last-of-type td:last-of-type{
				
				text-align: left;
			}
			table {
				
				height: 600px;
				border-radius: 10px;
			}
			
			#usern{
				width: 120px;
			}
			
			#sub{
				width: 142px;
				height: 52px;
				border-radius: 10px;
				border: none;
				margin-left: 100px;
				background: url(img/button.gif) center center;
			}
		</style>
	</head>

	<body>
		<div id="d1">
			<img src="img/register_logo.gif" />
			<table cellpadding="10" cellspacing="0" border="1">
				<tr>
					<td>通行证用户名:</td>
					<td>
						<input type="text" name="usern" id="usern" onfocus="tishi(this)" onblur="shiqu(this)"/><span id="s1">&nbsp;&nbsp;@163.com</span>
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">通行证用户名不能为空,请输入通行证用户名</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">通行证用户名输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								1、由字母、数字、下划线、点、减号组成<br>
								2、只能以数字、字母开头或结尾，且长度为4-18
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								1、由字母、数字、下划线、点、减号组成<br>
								2、只能以数字、字母开头或结尾，且长度为4-18
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>登录密码:</td>
					<td>
						<input type="password" name="passw" id="passw" onfocus="tishi(this)" onblur="shiqu(this)"/>
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">密码不能为空,请输入密码</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">密码输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								由字母、数字、符号组成，且长度为8-12
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								只能以数字、字母开头或结尾，且长度为8-12
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>重复登录密码:</td>
					<td>
						<input type="password" name="repassw" id="repassw" onfocus="tishi(this)" onblur="shiqu(this)" />
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">重复密码不能为空,请输入重复密码</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">重复密码输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								重复登录密码
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								两次密码不一致，请检查
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" id="sex" value="男" checked="checked" />男
						<input type="radio" name="sex" id="sex" value="女" />女
					</td>
					<td>
						
					</td>
				</tr>
				<tr>
					<td>真实姓名:</td>
					<td>
						<input type="text" name="zhenname" id="zhenname" />
					</td>
					<td>

					</td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td>
						<input type="text" name="nicheng" id="nicheng" onfocus="tishi(this)" onblur="shiqu(this)" />
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">昵称不能为空,请输入昵称</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">昵称输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								由字母、数字、下划线、点、减号、汉字组成，长度为1-10
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								由字母、数字、下划线、点、减号、汉字组成，长度为1-10
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>关联手机号:</td>
					<td>
						<input type="text" name="tel" id="tel" onfocus="tishi(this)" onblur="shiqu(this)" />
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">关联手机号码不能为空,请输入关联手机号码</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">关联手机号码输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								以13、15、18开头，长度为11
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								格式错误，以13、15、18开头，长度为11
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>保密邮箱:</td>
					<td>
						<input type="text" name="email" id="email" onfocus="tishi(this)" onblur="shiqu(this)" />
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">保密邮箱不能为空,请输入保密邮箱</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">保密邮箱输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								例如:****@qq.com
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								格式错误，例:****@qq.com
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="3">
						<input type="submit" id="sub" value="" onclick="jiance()"/>
					</td>
				</tr>
			</table>
		</div>

	</body>

</html>